<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
import NavBar from "@/components/NavBar.vue";
import Status from "@/components/Status.vue";
import Order from "@/components/warehouse/dialingOrder.vue";
import Operation from "@/components/stock/operation.vue";
const statusList = ref(['待审核', '未调库', '已完成 '])
const text = ref('调库');
const isShow = ref(false);
const showTab = ref(true)
const outStockFn = () => {
  if(text.value === '调库'){
    showConfirmDialog({
      message: '确定将物品调出仓库吗？',
    }).then(() => {
      text.value = '完成';
    });
  }
  else {
    showTab.value=false
  }
};

const passFn = () => {
  isShow.value = true;
};
</script>

<template>
  <div class="overflowHidden">
    <NavBar title="出库单" />
    <div :class="showTab === true? 'height' : 'height h-[calc(100vh-46px)]'" >
      <Status :list="statusList" />
      <div class="marginTop">
        <Order />
        <Operation />
      </div>
    </div>
    <div v-if="showTab">
      <div v-if="isShow" class="elasticity justify-around w-full fixed py-[3px] px-[15px] left-0 bottom-0 backgroundColor">
        <van-button type="primary" size="large" round @click="outStockFn">{{ text }}</van-button>
      </div>
      <div v-else class="elasticity justify-around w-full fixed py-[3px] left-0 bottom-0 backgroundColor">
        <div class="text-[12px]">申请驳回</div>
        <van-button type="primary" @click="passFn" round>申请通过</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
::v-deep {
  .van-button{
    height: 40px;
  }
}
</style>